<template>
  <div class="showData">
    <el-row :span="24">
      <div class="bikeBaseTitle" style="background: #e5e9f2;height: 40px">车辆信息统计</div>
    </el-row>
    <el-row class="bikeBase">
      <el-col :span="8">
        <div id="bikeAddress" style="width: 480px;height: 360px"></div>
      </el-col>
      <el-col :span="8">
        <div id="bikePrice" style="width: 480px;height: 360px"></div>
      </el-col>
      <el-col :span="8">
        <div id="bikeSize" style="width: 480px;height: 360px"></div>
      </el-col>
    </el-row>
    <el-row :span="24">
      <div class="bikeBaseTitle" style="background: #e5e9f2;height: 40px">交易量统计</div>
    </el-row>
    <el-row class="tradeInfo">
      <el-col :span="8">
        <div id="tradeTimeColumn" style="width: 480px;height: 360px"></div>
      </el-col>
      <el-col :span="8">
        <div id="tradeTimeLine" style="width: 480px;height: 360px"></div>
      </el-col>
      <el-col :span="8">
        <div id="tradeTime"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "ShowData",
  data(){
    return{
      dataCount:{
        areaResultList:[],
        priceResultList:[],
        addResultList:[]
      }
    }
  },
  methods:{
    //获取各种数据量
    getDataCount(){
      this.$network.getDataCount().then(res=>{
        this.dataCount.addResultList = JSON.stringify(res.data.addResultList);
        this.dataCount.priceResultList = res.data.priceResultList;
        this.dataCount.areaResultList = res.data.areaResultList;
        this.dataCount = res.data.data;
        this.bikeAddress();
        this.bikePrice();
        this.bikeSize();
        this.tradeTimeColumn();
        this.tradeTimeLine();
      })
    },
    //车辆地址数据
    bikeAddress(){
      var bikeAddress = echarts.init(document.getElementById("bikeAddress"),)
      // 指定图表的配置项和数据
      var option = {
        title:{
          text:'店铺地址占比'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: '店铺地址占比',
            type: 'pie',
            radius:'50%',
            data:this.dataCount.addResultList,
            itemStyle:{
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.2)'
              },
              normal:{
                label:{
                  show:true,
                  formatter:'{b}',

                },
                labelLine:{
                  show:true,
                  length:30
                }
              }
            },
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      bikeAddress.setOption(option);
    },
    //车辆月租金额占比
    bikePrice(){
      var bikePrice = echarts.init(document.getElementById("bikePrice"),)
      // 指定图表的配置项和数据
      var option = {
        title:{
          text:'车源价格占比(元/月)'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: '车辆价格占比',
            type: 'pie',
            radius:['30%','60%'],
            // data: [
            //   {value:10,name:'500以下'},
            //   {value:10,name:'501-1500'},
            //   {value:2,name:'1500-2000'},
            //   {value:2,name:'2000-2500'},
            // ],
            data:this.dataCount.priceResultList,
            itemStyle:{
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.2)'
              },
              normal:{
                label:{
                  show:true,
                  formatter:'{b}',
                  normal:{
                    position:'inner',
                  }
                },
              }
            },
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      bikePrice.setOption(option);
    },
    //车辆时租金额占比
    bikeSize(){
      var bikeSize = echarts.init(document.getElementById("bikeSize"),)
      // 指定图表的配置项和数据
      var option = {
        title:{
          text:'车源价格占比(元/时)'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [
          {
            name: '车辆价格占比',
            type: 'pie',
            radius:'50%',
            // data: [
            //   {value:10,name:'30以下'},
            //   {value:10,name:'30-50'},
            //   {value:2,name:'50-70'},
            //   {value:3,name:'70-80'},
            //   {value:7,name:'80-90'},
            //   {value:6,name:'90-100'},
            //   {value:3,name:'100以上'},
            // ],
            data:this.dataCount.areaResultList,
            itemStyle:{
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.2)'
              },
              normal:{
                label:{
                  show:true,
                  formatter:'{b}',

                },
                labelLine:{
                  show:true,
                  length:30
                }
              }
            },
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      bikeSize.setOption(option);
    },
    //交易时间柱状图
    tradeTimeColumn(){
      var tradeTimeColumn = echarts.init(document.getElementById("tradeTimeColumn"),)
      // 指定图表的配置项和数据
      var option = {
        title:{
          text:'交易量柱状图(2025年)'
        },
        tooltip:{

        },
        xAxis: {
          data: ['2025-1', '2025-2', '2025-3', '2025-4', '2025-5', '2025-6','2025-7','2025-8','2025-9','2025-10','2025-11','2025-12']
        },
        yAxis:{

        },
        series:[
          {
          name:'交易量',
          type:'bar',
          data:[1,0,2,3,1,4,5,2,3,0,1,1],
          },

        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      tradeTimeColumn.setOption(option);
    },
    //交易时间折线图
    tradeTimeLine(){
      var tradeTimeLine = echarts.init(document.getElementById("tradeTimeLine"),)
      // 指定图表的配置项和数据
      var option = {
        title:{
          text:'交易量折线图(2025年)'
        },
        xAxis: {
          data: ['2025-1', '2025-2', '2025-3', '2025-4', '2025-5', '2025-6','2025-7','2025-8','2025-9','2025-10','2025-11','2025-12']
        },
        yAxis:{

        },
        series:[
          {
            name:'交易量',
            type:'line',
            data:[1,0,2,3,1,4,5,2,3,0,1,1],
          },

        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      tradeTimeLine.setOption(option);
    }
    //交易数量与车辆的数据关系
    //交易数量与价格的占比
    //交易数量与车辆大小的占比
  },
  mounted() {
    this.getDataCount();

  },

}
</script>

<style scoped>
.showData{
  font-family: 华文楷体;
  font-size: 26px;
  font-weight: bold;
  height: 700px;
  overflow: scroll;
  overflow-x: hidden !important;
}
.bikeBase{
  height: 400px;
}
.tradeInfo{
  height: 400px;
}
.tradeAndBike{
  height: 400px;
}
</style>
